<template>
  <el-dialog title="添加或修改语法" :visible.sync="visible" :show-close="false" width="480px" center>
    <div class="previewGrammar">
      <knowledge-item-div type="grammar" :content="previewGrammar" size-type="small"></knowledge-item-div>
    </div>
    <el-form :model="data" class="form-class" :rules="rules" ref="grammarForm">
      <el-form-item label="分类" :label-width="labelWidth" prop="category">
        <el-select v-model="data.category" filterable placeholder="请选择">
          <el-option v-for="item in categoryOptions" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <template v-for="(item,index) in data.contentList">
        <line-icon iconName="el-icon-circle-close" @callBack="removeBelowContent(index)"
                   :key="index + '_line'"></line-icon>
        <el-form-item :key="index + '_seq'" label="序列号" :label-width="labelWidth" :prop="'contentList.' + index + '.seq'" :rules="rules.seq">
          <el-input v-model="item.seq" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :key="index + '_content'" label="语法" :label-width="labelWidth" :prop="'contentList.' + index + '.content'" :rules="rules.content">
          <el-input v-model="item.content" autocomplete="off"></el-input>
        </el-form-item>
      </template>
    </el-form>
    <line-icon iconName="el-icon-circle-plus-outline" @callBack="addOneContent"></line-icon>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit" v-loading.fullscreen.lock="fullscreenLoading">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import KnowledgeItemDiv from "@/components/KnowledgeItemDiv";
import LineIcon from "@/components/common/LineIcon";
import {combinedDisplayGrammar} from "@/utils/stringUtil";
import {saveOrModifyEditedGrammar} from "@/apis/sentence.api";

export default {
  name: "AddOrModifyGrammarDialog",
  components: {
    KnowledgeItemDiv,
    LineIcon
  },
  props: {
    visible: Boolean
  },
  data() {
    return {
      labelWidth: '108px',
      fullscreenLoading: false,
      categoryOptions: ['动词分类','语气词','adv','格助词','感叹词','接续助词','助动词','副助词','终助词','て型语法',
        '动词接续型-て型',
        '动词过去式-た型',
        '动词礼貌型-ます型',
        '动词能力型-れる型',
        '动词意志型-おう型',
        '动词使役型-せる型'
      ],
      rules: {
        category: [
          { required: true, message: '请选择一个语法内容', trigger: 'change' }
        ],
        seq: [
          { required: true, message: '请填写序列号内容', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请填写语法内容', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    updateVisible(val) {
      this.$emit('update:visible', val);
    },
    clearForm() {
      this.updateEditedGrammar({
        category: '',
        contentList: [{
          seq: '1',
          content: ''
        }]
      });
      this.$refs.grammarForm.resetFields();
    },
    cancel() {
      this.updateVisible(false);
      this.clearForm();
    },
    async saveOrModifyItem() {
      return await saveOrModifyEditedGrammar(this.editedSentenceId.videoNum, this.editedSentenceId.seq, this.data);
    },
    submit() {
      this.$refs.grammarForm.validate(async (valid) => {
        if (valid) {
          this.fullscreenLoading = true;
          this.updateVisible(false);
          await this.saveOrModifyItem();
          this.clearForm();
          this.fullscreenLoading = false;
          this.$message({ type: 'success', message: '添加成功！'});
          location.reload();
        } else {
          this.$message({type: 'error', message: '添加失敗!'});
          return false;
        }
      });
    },
    updateEditedGrammar(payload) {
      this.$store.commit("updateEditedGrammar", payload);
    },
    addContentListToGrammar(payload) {
      this.$store.commit("addContentListToGrammar", payload);
    },
    addOneContent() {
      if (this.data.contentList.length === 3) {
        this.$message({ message: '同类语法最多填写三项', type: 'error'});
        return;
      }
      this.addContentListToGrammar({
        seq: `${this.data.contentList.length + 1}`,
        content: ''
      });
    },
    removeBelowContent(rowIndex) {
      if (this.data.contentList.length === 1 && rowIndex === 0) {
        this.$message({ message: '至少填写一项语法', type: 'error'});
        return;
      }
      this.data.contentList.splice(rowIndex, 1);
    }
  },
  computed: {
    data() {
      return this.$store.getters.editedGrammar;
    },
    previewGrammar() {
      return combinedDisplayGrammar(this.data);
    },
    editedSentenceId() {
      return this.$store.getters.editedSentenceId;
    }
  },
}
</script>

<style lang="scss" scoped>
.previewGrammar {
  margin-left: 63px;
  margin-bottom: 50px;
}
.form-class ::v-deep .el-divider {
  padding-left: 61px;
  margin-left: 8px;
}
.form-class ::v-deep .el-icon-circle-close {
  padding-left: 68px;
}
</style>